<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .box {
        border: 1px gray solid;
        border-radius: 10px;
        padding: 15px;
      }
      
      .title {
        font-size: 15px;
        font-weight: bold;
        margin: 10px;
      }
      
      .card {
        display: flex;
        column-gap: 10px;
      }
      
      #card-son, .card-son {
        width: 200px;
        height: 50px;
        margin: 10px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px black solid;
      }
      
      .text {
        color: skyblue;
        font-size: 30px;
        font-weight: bold;
      }
      
      .bgColor {
        background: pink;
      }
      
      button {
        margin-left: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- v-bind基本使用 -->
      <div class="box">
        <div class="title">v-bind基本使用</div>
        <div class="card">
          <div v-bind:id="bindId">v-bind:id</div>
          <div :id="bindId">v-bind:id</div>
        </div>
      </div>
      <br>
      
      <!-- 动态绑定class，注意区分对象和数组绑定形式 -->
      <div class="box">
        <div class="title">动态绑定class，注意区分对象和数组绑定形式</div>
        <div class="card">
          <div class="card-son" :class="bindClassStr">v-bind:class</div>
          <div class="card-son" :class="bindClassObj">v-bind:class</div>
          <div class="card-son" :class="{'text': booleanValue, bindClassStrBgColor: false}">v-bind:class</div>
          <div class="card-son" :class="[bindClassStrText, bindClassStrBgColor]">v-bind:class</div>
        </div>
      </div>
      <br>
      
      <!-- 动态绑定style，注意区分对象和数组绑定形式 -->
      <div class="box">
        <div class="title">动态绑定style，注意区分对象和数组绑定形式</div>
        <div class="card">
          <div class="card-son bgColor" :style="bindStyleObj">v-bind:style</div>
          <div class="card-son bgColor" :style="{'color':'skyblue','fontSize':bindStyleValFontSize+'px'}">v-bind:style
          </div>
          <div class="card-son bgColor" :style="[bindStyleObjFont,bindStyleObjColor]">v-bind:style</div>
          <!-- 渲染浏览器支持的最后一个属性值 -->
          <div class="card-son bgColor" :style="{display:['-webkit-box','-ms-flexbox','flex']}">v-bind:style</div>
        </div>
      </div>
      <br>
      
      <!-- 绑定值为false/null/undefined时该属性被移除 -->
      <div class="box">
        <div class="title">绑定值为false/null/undefined时该属性被移除</div>
        <div class="card">
          <button :disabled="false">按钮</button>
          <button :disabled="null">按钮</button>
          <button :disabled="undefined">按钮</button>
          <button :disabled="">按钮</button>
        </div>
      </div>
      <br>
      
      <!-- 对象语法，动态绑定多个值 -->
      <div class="box">
        <div class="title">对象语法，动态绑定多个值</div>
        <div class="card">
          <div v-bind="bindValues">v-bind</div>
        </div>
      </div>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          // 试着修改以下属性值，看看HTML中的变化
          booleanValue: true,
          bindId: 'card-son',
          bindClassStr: 'text bgColor',
          bindClassObj: {
            'text': false,
            'bgColor': true,
          },
          bindClassStrText: 'text',
          bindClassStrBgColor: 'bgColor',
          bindStyleValFontSize: '30',
          bindStyleObj: {
            'color': 'skyblue',
            'font-size': '30px',
            'font-weight': 'bold'
          },
          bindStyleObjFont: {
            'font-size': '30px',
            'font-weight': 'bold'
          },
          bindStyleObjColor: {
            'color': 'skyblue',
          },
          bindValues: {
            id: 'card-son',
            class: 'text bgColor'
          }
        };
      }
    }).mount('#app');
  </script>
</html>